/*
coded by YeatesYS
*/
html{
    zoom: 1;
}
body{
    margin:0;
    background: #F7F7F7;
    height:100%;
    font-family: cursive;
    overflow: hidden;
}

::selection {
    background: rgba(159, 74, 120, 0.97);
    color: #FFF;
}
::-moz-selection {
    background: rgba(159, 74, 120, 0.97);
    color: #FFF;
}

.main{
    margin: 0 auto;
    width: 90%;
}

.cl {
    display: inline-block;
    width: 43%;
    padding: 3% 4% 0 0;
    margin-right: -4px;
    vertical-align: top;
}
.cr{
    display:inline-block;
    vertical-align: top;
    padding: 2% 0 3% 6%;
    width: 40%;
}

.me{
    background: rgba(255,255,255,0.7);
    display:inline-block;
    padding: 12px;
    transition: all ease 0.05s;
}
.me:hover {
    background: rgba(255,255,255,0.9);
}
.me:active {
    transform: scale(0.96);
    -webkit-transform: scale(0.96);
    -moz-transform: scale(0.96);
    -o-transform: scale(0.96);
    -ms-transform: scale(0.96);
}
.me img {
    display: inline-block;
    vertical-align: middle;
    width: 72px;
    margin-right: 6px;
    border-radius:15px
}
.me hgroup {
    display: inline-block;
    vertical-align: middle;
}

.me h1 {
    font-size: 18px;
    margin: 0 0 2px 0;
    padding:5px 0 10px;
    text-align:center;
    border-bottom: 3.5px solid #E1E1E1;
}
.me h2 {
    font-size: 14px;
    margin:0;
    padding-top:10px;
    font-weight: normal
}
.evaluate h1{
    font-size:20px;
    margin:12px 0 0 0;
}
.evaluate p{
    margin:13px 0 13px 0;
}
.tags {
    margin: 20px 0;
}
.tags ul {
    padding: 0;
}
.tags ul li {
    display: inline-block;
    background: #121314;
    color: #FEFEFE;
    font-size: 13px;
    padding: 0 8px 0 8px;
    margin: 0 4px 0 0;
    line-height: 24px;
    cursor: default;
    transition: all linear 0.05s;
}
.tags ul li:hover {
    background: #343536;
}
.tags ul li:active {
    background: #121314;
    -webkit-transform: scale(0.95);
    -moz-transform: scale(0.95);
    -o-transform: scale(0.95);
    -ms-transform: scale(0.95);
    transform: scale(0.95);
}
.tags ul li:before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    line-height: 20px;
    margin: -2px 6px 0 0;
    width: 4px;
    height: 4px;
    background: #FFF;
}

.skills p {
    margin: 0.6em 0 1.8em 0;
    font-size: 14px;
}
.skills span{
    display:inline-block;
    vertical-align: middle;
    height: 15px;
    margin: 0;
}
.skills span#s1{
    background: #66BAB7;
}
.skills span#s2{
    background: #BA6666;
}
.skills span#s3{
    background: #669EBA;
}
.skills span#s4{
    background: #BA6694
}
.skills span#s5{
     background: #66BA98;
 }
.skills .progress {
    background-color: #ffffff;
    box-shadow: 0 0 1px #bbbbbb inset;
    max-width: 400px;
    margin: 0 0;
    line-height: 0;
    transition: all ease 0.2s;
}
.skills .progress :hover {
    box-shadow: 0 0 2px #030303;
}

.contact .links{
    display: block;
    padding: 0;
    letter-spacing: -2px;
}
.contact h1{
    font-size: 26px;
    margin-bottom:10px;
}
.contact li {
    display: inline-block;
    text-align: center;
    width: 20%;
    padding: 0 2.5%;
    letter-spacing: 0;
    background: rgba(0255,255,255,0.7);
    -webkit-transition: all ease 0.2s;
    -moz-transition: all ease 0.2s;
    -o-transition: all ease 0.2s;
    -ms-transition: all ease 0.2s;
    transition: all ease 0.2s;
    vertical-align: middle;
}
.contact li:hover {
    background: rgba(0,0,0,0.85);
    color: #FEFEFE;
}
.contact li:active  {
    background: rgba(0,0,0,1);
}
.contact li a {
    display: block;
    padding: 22px 0;
    width: 100%;
    text-decoration: none;
    color: inherit;
    vertical-align: middle;
}
.contact li a h2 {
    font-size: 24px;
    margin: 0 0 16px 0;
    padding: 0 0 0 16px;
    line-height: 24px;
}
.contact li a p {
    font-size: 14px;
    margin: 0;
    line-height: 15px;
}
.contact h2::before {
    content: "";
    display: inline-block;
    width: 32px;
    height: 32px;
    margin: -6px 2px 0 -18px;
    vertical-align: middle;
    background-repeat: no-repeat;
    background-position: center;
    -webkit-filter: brightness(0);
    -moz-filter: brightness(0);
    -ms-filter: brightness(0);
    transition: all ease 0.2s;
}
.contact li:hover h2::before {
    -webkit-filter: brightness(1);
    -moz-filter: brightness(1);
    -ms-filter: brightness(1);
}

.contact #blog h2::before {
    background-image: url("../img/blog.png");
    background-size: 28px;
    background-position: center;
}
.contact #blog:hover h2::before {
    background-image: url("../img/blog_r.png");
}
.contact #github h2::before {
    background-image: url("../img/github.png");
    background-size: 28px;
    background-position: center;
}
.contact #github:hover h2::before {
    background-image: url("../img/github_r.png");
}
.contact #mail h2::before {
    background-image: url("../img/mail.png");
    background-size: 28px;
    background-position: center;
}
.contact #mail:hover h2::before {
    background-image: url("../img/mail_r.png");
}
.contact #weibo h2::before {
    background-image: url("../img/weibo.png");
    background-size: 28px;
    background-position: center;
}
.contact #weibo:hover h2::before {
    background-image: url("../img/weibo_r.png");
}

.footer{
    margin-top:50px;
    background-color: #383838;
    width:100%;
}
.footer p{
    padding:20px;
    text-align:center;
    color: #E6E6E6;
}

.blackbox {
    width: 120%;
    height: 3000px;
    background-color: #0E120D;
    background-size: 4px 100%;
    position: absolute;
    top: -1000px;
    z-index: -1;
    -webkit-transform: rotate(-39deg);
    -ms-transform: rotate(-39deg);
    -moz-transform: rotate(-39deg);
    box-shadow: 0 0 12px #484848;
}
div#bb1{
    margin-left: -140%;
}
div#bb2{
    margin-left: 113%;
}

@media ( max-width:1020px ){
    html{
        overflow-x: hidden;
        overflow-y: scroll;
        zoom: 1.25;
    }
    body{
        font-family:inherit;
    }
    .main{
        width:100%;
    }
    .blackbox{
        display:none;
    }
    .me{
        display: block;
        max-width: 45%;
        margin: 0 auto;
        padding-bottom: 0;
    }
    .me h2{
        font-size:13px;
    }
    .me img{
        margin:0 auto;
        display:block;
    }
    .me hgroup{
        text-align: center;
        margin: 0 auto;
        display: block;
    }
    .tags li{
        font-size:16px;
    }
    .evaluate h1{
        margin-bottom:18px;
    }
    .evaluate p{
        font-size:15px;
    }
    .cr{
        display:block;
        width: 100%;
        margin: 0 auto;
        padding: 2% 0 3% 0;
    }
    .cr h1{
        font-size:25px;
    }
    .cr .progress{
        margin: 0 auto;
        max-width: 72%;
    }
    .cr h1,.contact h1,.skills p,.evaluate h1{
        text-align:center;
    }
    .cl{
        display:block;
        width: 95%;
        margin: 0 auto;
        padding: 3% 0 0 0;
    }
    .cr .skills{
        margin:0 auto;
    }
    .skills p{
        font-size:14px;
    }
    .contact h1{
        margin-bottom:20px;
        font-size:25px;
    }
    .contact li{
        display:block;
        width:80%;
        margin:0 auto;
    }
}